<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="bootstrap.min.css">
	<style type="text/css">
	.row{
		margin-bottom: 20px;
	}
	.row .row{margin-top: 20px;margin-bottom: 0}
	[class*="col-"]{padding-top: 15px;padding-bottom: 15px;
		background-color:#eee; 
		background-color: rgba(86,61,124,.15);
		border:1px solid #ddd;
		border:1px solid rgba(86,61,124,.2);
	}
	</style>
</head>
<body>

	<div class="container">
		<div class="row">
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
		</div>
		<div class="row">
			<div class="col-md-3">col-md-3</div>
			<div class="col-md-3">col-md-3</div>
			
			<div class="col-md-3">col-md-3</div>
		</div>

		<div class="row">
		<!-- 偏移效果用col-md-offset-4，最后的数字是偏移多少 -->
			<div class="col-md-4 col-md-offset-4">col-md-4</div>
		</div>

		<!-- 嵌套 -->
		<div class="row">
			<div class="col-sm-9">
				one
				<div class="row">
					<div class="col-xs-8">first</div>
					<div class="col-xs-4">two</div>
				</div>
			</div>
		</div>


		<div class="row">
			<div class="col-md-9 col-md-push-3">col-md-9</div>
			<div class="col-md-3 col-md-pull-9">col-md-3</div>
		</div>




	</div>


</body>
</html>